<template>
  <view class="header-container">
    <i class="back-btn el-icon-arrow-left" @click="goBack"></i>
	<span class="option-btn" @click="handleOption" v-if="option"></span>
    <view>{{ title }}</view>
  </view>
</template>
<script>
export default {
  name: '',
  data() {
    return {}
  },
  props: ['title', 'step','option'],
  methods: {
    goBack() {
      if (this.step && this.step != 1 && this.step != 3) {
        console.log(this.step)
        this.$emit('callbackStep', this.step - 1)
      } else {
        this.$router.push({path: '/pages/my/index'})
      }
    },
	handleOption(){
		this.$emit('callbackOption')
	}
  }
}
</script>
<style lang="scss" scoped>
.header-container {
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  color: #000;
  text-align: center;
  .back-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50rpx;
    cursor: pointer;
    font-size: 50rpx;
    color: #686868;
  }
  .option-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50rpx;
    cursor: pointer;
	width: 33rpx;
	height: 45rpx;
	border: 0;
	margin-top: 4rpx;
	// background: url('@/static/images/tip.png') no-repeat;
	background-size: 33rpx 45rpx;
	
  }
  div {
    flex: 1;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
